import React, { useState } from 'react';
import NoUiSlider from '../../components/NoUiSlider';
import '../common.css';
import './styles.css';

const NonLinearSlider = () => {
  const [linearValues, setLinearValues] = useState([500, 4000]);
  const [nonLinearValues, setNonLinearValues] = useState([500, 4000]);
  const [positions, setPositions] = useState([0, 0]);

  const handleLinearChange = (values) => {
    setLinearValues(values.map(Number));
  };

  const handleNonLinearChange = (values, handle, unencoded, isTap, positions) => {
    setNonLinearValues(values.map(Number));
    if (positions) {
      setPositions(positions);
    }
  };

  return (
    <div className="non-linear-slider-container">
      <h2>非线性和线性范围示例</h2>
      
      {/* 线性范围滑块 */}
      <div className="slider-section">
        <h3>线性范围</h3>
        <div className="slider-wrapper">
          <div className="slider-container">
            <NoUiSlider
              start={linearValues}
              connect={true}
              range={{
                'min': 0,
                'max': 10000
              }}
              step={500}
              tooltips={[true, true]}
              onChange={handleLinearChange}
            />
          </div>
          <div className="value-display">
            <div>最小值: {linearValues[0]}</div>
            <div>最大值: {linearValues[1]}</div>
          </div>
        </div>
        <div className="description">
          <p>线性范围滑块：</p>
          <ul>
            <li>范围从 0 到 10000</li>
            <li>步进值为 500</li>
            <li>均匀分布</li>
            <li>每个单位代表相同的值</li>
          </ul>
        </div>
      </div>

      {/* 非线性范围滑块 */}
      <div className="slider-section">
        <h3>非线性范围</h3>
        <div className="slider-wrapper">
          <div className="slider-container">
            <NoUiSlider
              start={nonLinearValues}
              connect={true}
              range={{
                'min': [0],
                '10%': [500, 500],
                '50%': [4000, 1000],
                'max': [10000]
              }}
              tooltips={[true, true]}
              onChange={handleNonLinearChange}
            />
          </div>
          <div className="value-display">
            <div>最小值: {nonLinearValues[0]}, 位置: {positions[0]?.toFixed(2) || '0.00'}%</div>
            <div>最大值: {nonLinearValues[1]}, 位置: {positions[1]?.toFixed(2) || '0.00'}%</div>
          </div>
        </div>
        <div className="description">
          <p>非线性范围滑块：</p>
          <ul>
            <li>范围从 0 到 10000</li>
            <li>不同区间使用不同的步进值：</li>
            <li>范围分布：
              <ul>
                <li>0-10%: 0-500，步进值为 500</li>
                <li>10-50%: 500-4000，步进值为 500</li>
                <li>50-100%: 4000-10000，步进值为 1000</li>
              </ul>
            </li>
            <li>注意观察滑块位置百分比与值的变化关系</li>
          </ul>
        </div>
      </div>
    </div>
  );
};

export default NonLinearSlider;